<template>
  <div>
    <div v-if="value === 'Option1'">登录</div>
    <div v-else>客服登录</div>

    <el-select
      v-model="value"
      clearable
      placeholder="Select"
      style="width: 240px"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>

    <el-form ref="loginRef" :model="loginForm" :rules="loginRules" label-position="right" status-icon>
      <el-form-item v-if="value === 'Option1'" prop="telephone" label="手机号">
        <el-input v-model="loginForm.telephone" />
      </el-form-item>
      <el-form-item v-else prop="name" label="名字">
        <el-input v-model="loginForm.name" />
      </el-form-item>
      <el-form-item prop="password" label="密码">
        <el-input type="password" v-model="loginForm.password" />
      </el-form-item>
      <el-row>
        <el-button @click="toLogin()">登录</el-button>
      </el-row>
      <el-row>
        <el-button @click="toRegister()">注册</el-button>
      </el-row>
    </el-form>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { loginApiUser, loginApiService } from '../utils/requestApi.js';
import { usePersonStore } from '../store/person.js';

const router = useRouter();
const personStore = usePersonStore();

const value = ref('Option1'); // 默认为用户
const options = [
  {
    value: 'Option1',
    label: '用户',
  },
  {
    value: 'Option2',
    label: '客服',
  },
];

const loginForm = ref({
  telephone: "18600000044", // 默认用户登录手机号
  name: "feedback", // 客服登录需要名字
  password: "123456" // 默认密码
});

const loginRef = ref(null);

const loginRules = {
  telephone: [
    { required: true, message: '请输入手机号码', trigger: 'blur' },
    { pattern: /^[1]\d{10}$/, message: '请正确输入11位手机号码', trigger: 'blur' },
  ],
  name: [
    { required: true, message: '请输入名字', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { pattern: /^\w{3,8}$/, message: '密码为字母或数字3至8位', trigger: 'blur' },
  ]
};

const toLogin = () => {
  loginRef.value.validate(async (rs) => {
    if (rs) {
      let loginApiFunction = value.value === 'Option1' ? loginApiUser : loginApiService;

      loginApiFunction(loginForm.value)
        .then(response => {
          if (response.data.result) {
            ElMessage({
              message: '登录成功',
              type: 'success',
            });

            if (value.value === 'Option1') {
              router.push({ path: "/home" });
			  personStore.setPersonInfo(response.data.data, response.data.msg);
            } else if (value.value === 'Option2') {
              router.push({ path: "/home2" });
            }
          } else {
            ElMessage({
              message: response.data.msg,
              type: 'danger',
            });
          }
        })
        .catch(err => {
          ElMessage({
            message: err,
            type: 'danger',
          });
        });
    }
  });
};

const toRegister = () => {
  router.push({ path: '/register' });
};
</script>
